<template>
  <div style="background:white;height:100%;padding:20px">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="用户名/手机号">
              <a-input v-model="queryParam.mobile" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="会员状态">
              <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="1">不通过</a-select-option>
                <a-select-option value="2">待审核</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="注册ip">
              <a-input v-model="queryParam.ip" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 6 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="onSelect">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-table :pagination="pagination" @change="pageShow" class="cgmxTable" size="small" rowKey="id" :columns="columns" :dataSource="userData" :loading="tableLoading">
      <template slot="action" slot-scope="text, record">
        <a-button @click="modifyEvent(record.id)">编辑</a-button>
        <a-button @click="deteleEvent(record.id)" style="margin-left:5px">删除</a-button>
        <a-button @click="statusEvnent(record.id,0)" v-if="record.status==1" style="margin-left:5px">禁用</a-button>
        <a-button @click="statusEvnent(record.id,1)" v-if="record.status==0" style="margin-left:5px">启用</a-button>
        <!-- <a-button @click="txmaEvent(record.id,record)" style="margin-left:5px">提现密码</a-button> -->
        <a-button @click="hymaEvent(record.id,record)" style="margin-left:5px">登录密码</a-button>
        <a-button @click="qbEvent(record.id,record)" style="margin-left:5px">钱包</a-button>
      </template>
      <template slot="status" slot-scope="text, record">
        <a style="color:#11C754" v-if="record.status==1">启用</a>
        <a style="color:red" v-else>禁用</a>
      </template>

    </a-table>

    <a-modal title="修改提现密码" :visible="mimavisible" :csonfirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-input placeholder="请输入提现密码" v-model="pwd" style="margin:20px;width:170px" />
    </a-modal>

    <a-modal title="修改会员密码" :visible="hymavisible" :confirm-loading="confirmLoading" @ok="handleOk1" @cancel="handleCancel">
      <a-input placeholder="请输入会员密码" v-model="pwd" style="margin:20px;width:170px" />
    </a-modal>

    <a-modal title="修改钱包" :visible="qbvisible" :confirm-loading="confirmLoading" @ok="handleOk2" @cancel="handleCancel">
      <a-input placeholder="请输入钱包密码" v-model="pwd" style="margin:20px;width:170px" />
    </a-modal>

    <a-modal title="编辑会员信息" :width="800" :visible="vipvisible" :confirm-loading="confirmLoading" @ok="handleOk3" @cancel="handleCancel">
      <a-row style="margin:20px">
        <a-col :span="3" style="text-align:right;margin-top:5px">
          手机号：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.mobile" style="width:170px" disabled/>
        </a-col>
        <a-col :span="3" style="text-align:right;margin-top:5px">
          真实姓名：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.realName" style="width:170px" />
        </a-col>

      </a-row>
      <a-row style="margin:20px">
        <a-col :span="3" style="text-align:right;margin-top:5px">
          银行：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.bankName" style="width:170px" />
        </a-col>
        <a-col :span="3" style="text-align:right;margin-top:5px">
          银行卡号：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.bankNo" style="width:170px" />
        </a-col>
      </a-row>
      
        <a-row style="margin:20px">
        <a-col :span="3" style="text-align:right;margin-top:40px">
          身份证正面：
        </a-col>
        <a-col :span="9">
          <!-- <a-input v-model="userInfo.cardImgBack" style="width:170px" /> -->
          <viewer>
          <img :src="userInfo.cardImgBack" style="width:170px;height:100px" />
          </viewer>
        </a-col>
        <a-col :span="3" style="text-align:right;margin-top:40px">
          身份证反面：
          
        </a-col>
        <a-col :span="9">
          <!-- <a-input v-model="userInfo.cardImgHead" style="width:170px" /> -->
          <viewer>
          <img :src="userInfo.cardImgHead" style="width:170px;height:100px" />
          </viewer>
        </a-col>
      </a-row>

        <a-row style="margin:20px">
      
        <a-col :span="3" style="text-align:right;margin-top:5px">
          身份证：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.idNumber" style="width:170px" />
        </a-col>
        <a-col :span="3" style="text-align:right;margin-top:5px">
          联系电话：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.emergentMobile" style="width:170px" disabled/>
        </a-col>
      </a-row>

       <a-row style="margin:20px">
        <a-col :span="3" style="text-align:right;margin-top:5px">
          紧急联系人：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.emergentName" style="width:170px" disabled/>
        </a-col>
        <a-col :span="3" style="text-align:right;margin-top:5px">
          联系人关系：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.emergentRelation" style="width:170px" disabled/>
        </a-col>
      </a-row>


       <a-row style="margin:20px">
        <a-col :span="3" style="text-align:right;margin-top:5px">
          家里人电话：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.familyMobile" style="width:170px" disabled />
        </a-col>
        <a-col :span="3" style="text-align:right;margin-top:5px">
          家里联系人：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.familyName" style="width:170px" disabled />
        </a-col>
      </a-row>

        <a-row style="margin:20px">
        <a-col :span="3" style="text-align:right;margin-top:5px">
          联系人关系：
        </a-col>
        <a-col :span="9">
          <a-input v-model="userInfo.familyRelation" style="width:170px" disabled/>
        </a-col>
          <a-col :span="3" style="text-align:right;margin-top:5px">
          城市：
        </a-col>

        <a-col :span="9">
          <a-input v-model="userInfo.city" style="width:170px" disabled/>
        </a-col>
      
      </a-row>

    </a-modal>

  </div>
</template>

<script>
import moment from 'moment'

import { userList, deleteById, updateStatus, updatePricePwd, updatePwd, updateWallet,getUserById,modifyUserById} from '@/api/userApi'

export default {
  name: 'TableList',
  components: {},
  inject: ['reload'],
  data() {
    return {
      vipvisible: false,
      mimavisible: false,
      confirmLoading: false,
      loading: false,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      tableLoading: false,
      pwd: '',
      userData: [],
      columns: [
        {
          title: '用户名',
          dataIndex: 'id',
          align: 'center',
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          align: 'center',
        },
        {
          title: '钱包',
          dataIndex: 'wallet',
          align: 'center',
        },
        {
          title: '提现密码',
          dataIndex: 'pricePwd',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '注册时间',
          dataIndex: 'createDate',
          align: 'center',
        },
        {
          title: '注册ip',
          dataIndex: 'ip',
          align: 'center',
        },
        {
          title: '注册地区',
          dataIndex: 'registration',
          align: 'center',
        },
        {
          title: '最后登录时间',
          dataIndex: 'loginDate',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: [],
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 15,
      ip: '',
      mobile: '',
      status: '',
      id: '',
      hymavisible: false,
      qbvisible: false,
      userInfo: {},
    }
  },
  created() {},
  mounted() {
    this.userListFunction()
  },
  methods: {
    modifyEvent(id) {
       getUserById(id)
        .then((response) => {
         this.userInfo=response.data
          
        })
        .catch((error) => {
          
        })
      this.vipvisible = true
    },
    onSelect() {
      this.state = this.queryParam.status
      this.mobile = this.queryParam.mobile
      this.ip = this.queryParam.ip
      this.userListFunction()
    },
    hymaEvent(id, e) {
      this.id = id
      this.pwd = ''
      this.hymavisible = true
    },
    qbEvent(id, e) {
      this.id = id
      this.pwd = e.wallet
      this.qbvisible = true
    },
    txmaEvent(id, e) {
      this.id = id
      this.pwd = e.pricePwd
      this.mimavisible = true
    },
    //会员信息
    handleOk3(){
     this.confirmLoading = true
      modifyUserById(this.userInfo)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功',
              duration: 3,
            })
            this.vipvisible = false
            this.confirmLoading = false
            this.userListFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作失败',
              duration: 3,
            })
            this.vipvisible = false
            this.confirmLoading = false
            this.userListFunction()
          }
        })
        .catch((error) => {
          this.confirmLoading = true
          setTimeout(() => {
            this.vipvisible = false
            this.confirmLoading = false
          }, 2000)
        })
    },
    //钱包
    handleOk2(e) {
      this.confirmLoading = true
      // this.ModalText = 'The modal will be closed after two seconds';
      updateWallet(this.id, this.pwd)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功',
              duration: 3,
            })
            this.qbvisible = false
            this.confirmLoading = false
            this.userListFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作失败',
              duration: 3,
            })
            this.qbvisible = false
            this.confirmLoading = false
            this.userListFunction()
          }
        })
        .catch((error) => {
          this.confirmLoading = true
          setTimeout(() => {
            this.mimavisible = false
            this.confirmLoading = false
          }, 2000)
        })
    },
    //会员密码
    handleOk1(e) {
      this.confirmLoading = true
      // this.ModalText = 'The modal will be closed after two seconds';
      updatePwd(this.id, this.pwd)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功',
              duration: 3,
            })
            this.hymavisible = false
            this.confirmLoading = false
            this.userListFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作失败',
              duration: 3,
            })
            this.hymavisible = false
            this.confirmLoading = false
            this.userListFunction()
          }
        })
        .catch((error) => {
          this.confirmLoading = true
          setTimeout(() => {
            this.mimavisible = false
            this.confirmLoading = false
          }, 2000)
        })
    },
    //提现密码
    handleOk(e) {
      this.confirmLoading = true

      // this.ModalText = 'The modal will be closed after two seconds';
      updatePricePwd(this.id, this.pwd)
        .then((response) => {
          if (response.code == 200) {
            let type = 'success'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作成功',
              duration: 3,
            })
            this.mimavisible = false
            this.confirmLoading = false
            this.userListFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '操作失败',
              duration: 3,
            })
            this.mimavisible = false
            this.confirmLoading = false
            this.userListFunction()
          }
        })
        .catch((error) => {
          this.confirmLoading = true
          setTimeout(() => {
            this.mimavisible = false
            this.confirmLoading = false
          }, 2000)
        })
    },
    handleCancel() {
      this.mimavisible = false
      this.hymavisible = false
      this.qbvisible = false
      this.confirmLoading = false
      this.vipvisible = false
    },
    //用户信息获取
    userListFunction() {
      this.tableLoading = true
      userList(this.current, this.pageSize, this.ip, this.mobile, this.status)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.pageSize = this.pageSize
          pagination.total = response.data.total
          this.pagination = pagination
          this.userData = response.data.records
          this.pagination.current = response.data.current
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      userList(pagination.current, pagination.pageSize, this.ip, this.mobile, this.status)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.total = response.data.total
          this.pagination = pagination
          this.userData = response.data.records
          this.pagination.current = response.data.current
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //删除用户ById
    deteleEvent(e) {
      let clickNum = 0
      this.$confirm({
        title: '提示',
        content: '确认要删除吗?',
        onOk: async () => {
          if (clickNum == 0) {
            clickNum = 1
            const { code, data } = await deleteById(e)
            if (code == 200) {
              let type = 'success'
              this.$notification[type]({
                message: '温馨提示',
                description: '删除成功',
                duration: 3,
              })
            } else {
              let type = 'error'
              this.$notification[type]({
                message: '温馨提示',
                description: '删除失败',
                duration: 3,
              })
            }

            this.userListFunction()
          } else {
            let type = 'error'
            this.$notification[type]({
              message: '温馨提示',
              description: '请不要频繁点击',
              duration: 3,
            })
          }
        },
        onCancel() {},
      })
    },
    statusEvnent(id, status) {
      if (status == 0) {
        let clickNum = 0
        this.$confirm({
          title: '提示',
          content: '确认禁用吗?',
          onOk: async () => {
            if (clickNum == 0) {
              clickNum = 1
              const { code, data } = await updateStatus(id, status)
              if (code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '操作成功',
                  duration: 3,
                })
              } else {
                let type = 'error'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '操作失败',
                  duration: 3,
                })
              }

              this.userListFunction()
            } else {
              let type = 'error'
              this.$notification[type]({
                message: '温馨提示',
                description: '请不要频繁点击',
                duration: 3,
              })
            }
          },
          onCancel() {},
        })
      } else {
        let clickNum = 0
        this.$confirm({
          title: '提示',
          content: '确认要启用吗?',
          onOk: async () => {
            if (clickNum == 0) {
              clickNum = 1
              const { code, data } = await updateStatus(id, status)
              if (code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '操作成功',
                  duration: 3,
                })
              } else {
                let type = 'error'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '操作失败',
                  duration: 3,
                })
              }

              this.userListFunction()
            } else {
              let type = 'error'
              this.$notification[type]({
                message: '温馨提示',
                description: '请不要频繁点击',
                duration: 3,
              })
            }
          },
          onCancel() {},
        })
      }
    },
    tableOption() {
      if (!this.optionAlertShow) {
        this.options = {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            },
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange,
          },
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null,
        }
        this.optionAlertShow = false
      }
    },

    handleEdit(record) {
      this.$emit('onEdit', record)
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },

    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
  },
}
</script>
